
<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input
              v-model="search.keyword"
              style="width: 170px"
              placeholder="请输入问题标题搜索"
              clearable
          >
          </el-input>
          <el-button
              type="primary"
              icon="el-icon-search"
              @click="upSearch"
          ></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
          ref="table"
          :apiObj="apiObj"
          @selection-change="selectionChange"
          stripe
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
            label="编号"
            prop="id"
            width="80"
            sortable
        ></el-table-column>
        <el-table-column
            label="问题标题"
            prop="issueTitle"
            width="150"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            label="问题描述"
            prop="issueContent"
            width="150"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            label="手机号"
            prop="phoneNumber"
            width="150"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="处理情况" prop="status" width="90">
          <template #default="scope">
            <el-tag v-if="scope.row.status == false"  type="primary" disable-transitions >未处理</el-tag>
            <el-tag v-if="scope.row.status == true"  type="success" disable-transitions>已处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="right" width="170">
          <template #default="scope">
            <el-button
                size="small"
                @click="tableShow(scope.row, scope.$index)"
                >查看</el-button
              >
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>                                                         

  <save-dialog
      v-if="dialog.save"
      ref="saveDialog"
      @success="handleSuccess"
      @closed="dialog.save = false"
  >
  </save-dialog>
</template>

<script>
  import saveDialog from "./save";
  export default {
    name: "issueIndex",
    components: {
      saveDialog,
    },
    data() {
      return {
        dialog: {
          save: false,
        },
        showGrouploading: false,
        apiObj: this.$API.issue.page,
        selection: [],
        search: {
           keyword: "",
        },
      };
    },
    watch: {},
    mounted() {},
    methods: {
      //搜索
      upSearch() {
        this.$refs.table.upData(this.search);
      },
      //添加
      add() {
        this.dialog.save = true;
        this.$nextTick(() => {
          this.$refs.saveDialog.open();
        });
      },
      //编辑
      tableEdit(row) {
        this.dialog.save = true;
        this.$nextTick(() => {
          this.$refs.saveDialog.open("edit").setData(row);
        });
      },
      //详情
      tableShow(row) {
        this.dialog.save = true;
        this.$nextTick(() => {
          this.$refs.saveDialog.open("show").setData(row);
        });
      },
      //本地更新数据
      handleSuccess(data, mode) {
        if (mode == "add") {
          this.$refs.table.refresh();
        } else if (mode == "edit") {
          this.$refs.table.refresh();
        }
      },
      //表格选择后回调事件
      selectionChange(selection) {
        this.selection = selection;
      },
      //删除
      async tableDel(row) {
        var reqData = new FormData();
        reqData.append("id", row.id);
        var res = await this.$API.issue.delete.post(reqData);
        if (res.code == 200) {
          this.$refs.table.refresh();
          this.$message.success("删除成功");
        } else {
          this.$alert(res.message, "提示", { type: "error" });
        }
      },
      //批量删除
      async batchDel() {
        this.$confirm(
            `确定删除选中的 ${this.selection.length} 个选项吗？`,
            "提示",
            {
              type: "warning",
              confirmButtonText: "确定",
              confirmButtonClass: "el-button--danger",
            }
        )
            .then(async () => {
              const loading = this.$loading();
              let ids = this.selection.map((item) => {
                return item.id;
              });
              var reqData = new FormData();
              reqData.append("ids", ids);
              var res = await this.$API.issue.batchDelete.post(reqData);
              if (res.code == 200) {
                this.$refs.table.refresh();
                this.$message.success("删除成功");
              } else {
                this.$alert(res.message, "提示", { type: "error" });
              }
              loading.close();
            })
            .catch(() => {});
      },
    },
  };
</script>
